<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>widget select -- double underscore</title>
    <link rel="stylesheet" type="text/css" href="../example.css" />
<style>

h2 {
  font-size : 14px;
  font-weight : bold;
  padding : 10px 0 0;
  border : 0;
}

.tabs {background:#fff;width:212px;padding:10px;}
.tabs .thd {position:relative;z-index:2;overflow:hidden;}
.tabs .thd ul {padding:0;margin:0;}
.tabs .thd li {list-style:none;padding:5px;margin:0;float:left;border:1px solid #ddd;width:55px;cursor:pointer;text-align:center;background:#eee;color:blue;text-decoration:underline;height:19px;}
.tabs .thd li.active {cursor:default;font-weight:bold;border-bottom-color:#fff;text-decoration:none;color:black;background:#fff;}
.tabs .tbd {clear:both;padding:10px;border:1px solid #ddd;position:relative;top:-1px;z-index:1;}
.tabs .tbd div {display:none;height:100px;}
.tabs .tbd div.active {display:block;}
</style>
</head>
<body>

<div id="doc4">
  <div class="hd">
    <div class="logo" style="float:left;"><a href="http://code.google.com/p/double-underscore/" target="_blank"><img src="http://stauren.net/misc/images/bullhead.gif" /></a></div>
    <div class="hd-title">Module history example</div>
    <div>
      <a href="http://code.google.com/p/double-underscore/">Project home</a>&nbsp;
      <a href="http://code.google.com/p/double-underscore/w/list">More docs </a>
    </div>
    <h1>Example</h1>
    <div class="hd">
      <div class="tabs">
        <div class="thd">
          <ul>
            <li class="active">tab 0</li>
            <li>tab 1</li>
            <li>tab 2</li>
          </ul>
        </div>
        <div class="tbd">
          <div class="active">content 0</div>
          <div>content 1</div>
          <div>content 2</div>
        </div>
      </div>
    </div>
    <h1>Code</h1>
      <div class="gr">
        <h2>Add an entry to history</h2>
        <div style="padding-left:20px;">oHis.addEntry('tab', num);</div>
      </div>
      <div class="gr">
        <h2>Listen to du-history:change to invoke your own function when 'back' or 'forword' is clicked</h2>
        <div style="padding-left:20px;">__.Event.on(document, 'du-history:change', function(e) {});</div>
      </div>
      <div class="gr">
        <h2>Complete source</h2>
        <pre>
&lt;script src="http://double-underscore.googlecode.com/svn/trunk/src/loader/loader.js"&gt;&lt;/script&gt;
//NOTICE: loader.js in trunk is not stable, should always use the newest loader in pkgs
&lt;script&gt;
  __.load('history', function() { //loading the history module

    var _L = __.Lang,
      ctn = __.Dom.f('.thd'),
      tabs = __.Dom.$('.thd li'),
      cts = __.Dom.$('.tbd div');

    var oHis, activeTab = null;

    function activateTab(num) {
      _L.e(tabs, function(o, i) {
        if (i == num) {
          o.className = 'active';
          cts[i].className = 'active';
          activeTab = i;
        } else {
          o.className = '';
          cts[i].className = '';
        }
      })
    }

    __.Event.on(tabs, 'click', function(e) {
      var tar = e.target, num;
      if (tar && tar.tagName == 'LI' && tar.className == '') {
        num = _L.find(tabs, _L.curry('===', tar));

        activateTab(num);

        //add entry to history when tab changes
        oHis.addEntry('tab', num);
      }
    });

    __.Event.on(document, 'du-history:change', function(e) {
      var chd = e.memo.changed, newV;

      if (chd.tab) {
        newV = chd.tab.newVal;
        if (newV != activeTab) {
          activateTab(newV);
        }
      } else if (e.memo.removed.tab) {
        activateTab(0);
      }
    });

    //it's best to initiate after listen to the change event, or you may miss the first change event at page loading
    oHis = new __.History();
  });
&lt;/script&gt;
        </pre>
      </div>
    </div>
  </div>
</div>
<script src="../example.js"></script>
<script src="http://double-underscore.googlecode.com/svn/trunk/src/loader/loader.js"></script>
<script>
//WARNING: loader.js in trunk is not stable, should always use the following or newer loader when it's available
// http://double-underscore.googlecode.com/svn/tags/0.3.2/src/loader/loader.js

__.load('history', function() {
  var _L = __.Lang,
    ctn = __.Dom.f('.thd'), tabs = __.Dom.$('.thd li'), cts = __.Dom.$('.tbd div');

  var oHis, activeTab = null;

  function activateTab(num) {
    _L.e(tabs, function(o, i) {
      if (i == num) {
        o.className = 'active';
        cts[i].className = 'active';
        activeTab = i;
        dolog('switch to tab '+ num);
      } else {
        o.className = '';
        cts[i].className = '';
      }
    })
  }

  __.Event.on(tabs, 'click', function(e) {
    var tar = e.target, num;
    if (tar && tar.tagName == 'LI' && tar.className == '') {
      num = _L.find(tabs, _L.curry('===', tar));

      activateTab(num);
      oHis.addEntry('tab', num);
    }
  });

  __.Event.on(document, 'du-history:change', function(e) {
    var chd = e.memo.changed, newV;

    if (chd.tab) {
      newV = chd.tab.newVal;
      if (newV != activeTab) {
        activateTab(newV);
      }
    } else if (e.memo.removed.tab) {
      activateTab(0);
    }
  });

  dolog('Initiation complete.');
  oHis = new __.History();
}, {
  version : '0'
});
</script>
</body>
</html>


